<template>
   <div class="app-container">
     <!-- 搜索区 -->
     <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
       <el-form-item label="分类名称" prop="name">
         <el-input v-model="queryParams.name" placeholder="请输入分类名称" clearable style="width: 240px"
           @keyup.enter.native="handleQuery" />
       </el-form-item>

       <el-form-item label="字典状态" prop="status">
         <el-select v-model="queryParams.status" placeholder="请选择" clearable>
             <el-option
               v-for="item in dicts.sys_normal_disable"
               :key="item.id"
               :label="item.dictLabel"
               :value="item.dictValue">
             </el-option>
           </el-select>
      </el-form-item>

       <el-form-item>
         <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
       </el-form-item>
     </el-form>

     <!-- 功能区 -->
     <el-row>
       <el-col :span="24">
          <el-button type="primary" size="small"  @click="handlerAdd()" >新增</el-button>
          <el-button type="warning" size="small"  @click="handlerUpdate()" :disabled="single" >修改</el-button>
          <el-button type="success" size="small"  @click="handlerExcel()"  >导出</el-button>
       </el-col>
     </el-row>

     <el-table :data="tableData.rows" border style="width: 100%"  v-loading="loading" @selection-change="handleSelectionChange">
       <el-table-column type="selection" width="55" align="center"  />
       <el-table-column prop="id" label="编号" width="80" />
        <el-table-column prop="merchantName" label="商家名称"  />
       <el-table-column prop="name" label="分类名称"  />
       <el-table-column prop="picture" label="分类图片">
         <template slot-scope="scope">
           <img :src="scope.row.picture" width="150">
         </template>
       </el-table-column>

       <el-table-column label="状态" width="180">
         <template slot-scope="scope">
           <el-tag  v-for="item in dicts.sys_normal_disable" :key="item.id" v-if="item.dictValue=== scope.row.status" :type="item.listClass" >{{item.dictLabel}}</el-tag>
         </template>
       </el-table-column>

       <el-table-column prop="createTime" label="创建时间" width="180" />

       <el-table-column label="操作" align="left" width="160" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button   size="mini" type="text" icon="el-icon-edit" @click="handlerUpdate(scope.row)">修改</el-button>
           <el-button v-if="scope.row.status==='0'" size="mini"  type="text" icon="el-icon-delete" style="color:red;" @click="handlerDisable(scope.row)">停用</el-button>
           <el-button v-else-if="scope.row.status==='1'" size="mini" type="text" icon="el-icon-video-play" @click="handlerEnable(scope.row)">启用</el-button>
         </template>
       </el-table-column>
     </el-table>

     <!-- 分页条 -->
     <el-pagination v-if="tableData.total>0" :current-page="queryParams.page" :page-sizes="[1, 5, 10, 20,30,50,100]"
       :page-size="queryParams.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
       @size-change="handleSizeChange" @current-change="handleCurrentChange" />

     <!-- 新增和修改的对话框 -->
     <el-dialog 	v-bind:title="title"  :visible.sync="dialogVisible"  width="500px"  :close-on-click-modal="false"   >
       <!-- 内容 -->
     				<el-form ref="form" :model="form" label-width="80px">

              <el-form-item   label="分类名称" prop="name" :rules="[{ required: true, message: '不能为空', trigger: 'blur' } ]"  >
                <el-input v-model="form.name"></el-input>
              </el-form-item>

              <el-form-item label="分类图片">
                <el-upload
                  class="avatar-uploader"
                  :action="avatarUploadUrl"
                  :headers="tokenHeader"
                  :show-file-list="false"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="form.picture" :src="form.picture" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </el-form-item>


     				</el-form>

         <span slot="footer" class="dialog-footer">
           <el-button @click="resetForm">取 消</el-button>
           <el-button type="primary" @click="saveFormBefore">确 定</el-button>
         </span>
     </el-dialog>


    </div>
</template>

<script>
   import {dataApi,findByIdApi,addApi,updateApi,changeStatusApi} from '@/api/categoryclass.js'
   import {dataDictTypes } from '@/api/dictdata.js'
 //图片上传配置
  import {adminImageUploadUrl} from '@/settings.js'
  import { getToken } from '@/utils/auth'

  export default {
    // 计算属性(java中自定义get方法)
    computed: {
      //自定义方法（构造令牌）
      tokenHeader(){
        return {
          'Authorization' : 'Bearer '+ getToken()
        }
      }
    },
    data() {
      return {
        avatarUploadUrl: adminImageUploadUrl,
        loading: false,
        // 表单查询条件对象
        queryParams:{
          page: 1,
          size: 10
        },
        // 分页表格分页的结果对象
         tableData: {
           total: 0,
           rows: []
         },
         //表格选中的对象
         mutilrows:[],
         //表格选中对象的主键的值
         ids: [],
         //编辑按钮禁用
         single: true,
         //数据字典返回结果
         dicts: {},
         //对话框的变量
         title: '添加数据',
         dialogVisible: false,
         form: {
            picture: undefined
         },
      }
    },
    methods: {
      // 图片上传之前验证
      beforeAvatarUpload(file) {
        const isJPG = file.type === 'image/jpeg' ||  file.type === 'image/png';
        const isLt1M = file.size / 1024 / 1024 < 1;

        if (!isJPG) {
          this.$message.error('上传图片只能是 JPG、PNG 格式!');
        }
        if (!isLt1M) {
          this.$message.error('上传头像图片大小不能超过 1MB!');
        }
        return isJPG && isLt1M;
      },
      // 图片上传成功以后返回的数据(json, file[blob]数据)  公共桶
       handleAvatarSuccess(res, file) {
         this.form.picture=  res.data.image_url
       },
      handlerAdd(){
        //显示对话框
         this.dialogVisible =true
         this.title='添加数据'
      },
      handlerUpdate(row){
        
      },
      handlerExcel(){
        
      },
     //选中表格值的变化事件
      handleSelectionChange(val) {
        console.log(val)
          this.mutilrows = val;
          this.ids=val.map(s=> s.id);
          this.single = val.length!==1
      },
     // 每页几笔发生变化
      handleSizeChange(val) {
         this.queryParams.page=1
         this.queryParams.size=val
         // 重新查询
         this.fetchData()
     },
     // 当前页发生变化
     handleCurrentChange(val) {
         this.queryParams.page=val
          // 重新查询
          this.fetchData()
     },
     // 获取后台的查询数据
     fetchData(){
      
     },
     //点击搜索按钮
     handleQuery(){
       this.queryParams.page =1
       this.fetchData()
     },
     //查询数据字典的值
     fetchDictTypes() {
       
     },
     //重置表单
     resetForm(){
        //清空验证规则样式
        this.$refs['form'].resetFields();
        //清除数据
        this.form={
          picture: undefined
        }
        //关闭对话框
        this.dialogVisible =false
     },
     //提交保存数据之前验证
     saveFormBefore(){
          
     },
     //向后台提交数据
      saveForm(){
       

      },
      //停用账户
      handlerDisable(row){
       
      },
      //启用账户
      handlerEnable(row){
       
      },
      //更改账号状态
      changeStates(id,status){
         
      },
    },
    created() {
      this.fetchDictTypes()
      this.fetchData()
    }
  }
</script>

<style scoped>
  .link-type, .link-type:focus {
      color: #337ab7;
      cursor: pointer;
  }
</style>
